<template>
	<view>
		<view class="header">
			<u-navbar title="深圳 -- 赣州" back-icon-size='44' :background="background" :border-bottom='false' back-icon-color='#071D42'
			 title-color='#FFFFFF'></u-navbar>
			<view class="datePicker">
				<view class="pre" @click="preDay">
					前一天
				</view>
				<view class="date">
					02-04 周四 <u-icon name="arrow-down" size="28"></u-icon>
				</view>
				<view class="next" @click="nextDay">
					后一天
				</view>
			</view>
		</view>
		<view class="container">
			<view class="planeTab">
				<view class="planeTab-item" :class="{active:curtab == 0}" style="margin-right: 86rpx;" @click="tabFn(0)">
					<view class="title">
						火车票
					</view>
					<view class="price">
						¥296起
					</view>
					<view :class="{line:curtab == 0}"></view>
				</view>
				<view class="planeTab-item" :class="{active:curtab == 1}" @click="tabFn(1)">
					<view class="title">
						机票
					</view>
					<view class="price">
						¥1569起
					</view>
					<view class="planeTab-line" :class="{line:curtab == 1}"></view>
				</view>
			</view>

			<view class="train-ul">
				<view class="train-li" @click="navTo('./trainDetail')">
					<view class="trainInfo">
						<view class="start">
							<view class="time" style="color: #3587F7;">
								14:00
							</view>
							<view class="address">
								深圳北
							</view>
						</view>
						<view class="info">
							<view class="shic">
								12时55分
							</view>
							<image src="../../../static/imgs/airTo.png" mode=""></image>
							<view class="chec">
								K502
							</view>
						</view>
						<view class="end">
							<view class="time">
								12:50
							</view>
							<view class="address">
								厦门北
							</view>
						</view>
						<view class="price">
							<view class="pri">
								<text style="font-size: 24rpx;">¥</text>280.5
							</view>
							<view class="tip">
								排队人少
							</view>
						</view>
					</view>
					<view class="trainNum">
						<view class="">
							硬座 有
						</view>
						<view class="" style="margin: 0 88rpx;">
							硬卧 6张
						</view>
						<view class="">
							软卧 有
						</view>
					</view>
				</view>
			</view>

			<view class="lable">
				中转方案推荐
			</view>
			<view class="train-ul">
				<view class="train-li" @click="navTo('./transferDetail')">
					<view class="trainInfo">
						<view class="start">
							<view class="time" style="color: #3587F7;">
								14:00
							</view>
							<view class="address">
								深圳北
							</view>
						</view>
						<view class="info">
							<view class="shic">
								12时55分
							</view>
							<image src="../../../static/imgs/airTo.png" mode=""></image>
							<view class="chec">
								K502
							</view>
						</view>
						<view class="end">
							<view class="time">
								12:50
							</view>
							<view class="address">
								厦门北
							</view>
						</view>
						<view class="price">
							<view class="pri">
								<text style="font-size: 24rpx;">¥</text>280.5
							</view>
							<view class="tip">
								排队人少
							</view>
						</view>
					</view>
					<view class="trainNum">
						<view class="">
							第一程 H562 二等座有
						</view>
						<view class="">
							第二程 G856 二等座有
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="filter">
			<view class="" @click="showPop =true">
				<u-icon name="hourglass" color="#000000" size="28"></u-icon>筛选
			</view>
			<view class="">
				时间
			</view>
			<view class="">
				耗时
			</view>
			<view class="">
				价格
			</view>
		</view>

		<u-popup v-model="showPop" mode="bottom" border-radius="16">
			<view class="poponBox">
				<view class="head">
					<view class="close" @click="showPop =false">
						<u-icon name="close" size="28"></u-icon>
					</view>
					<view class="title">
						筛选
					</view>
					<view class="comfirm">
						确定
					</view>
				</view>
				<view class="trainType">
					<view class="lable">
						车型选择
					</view>
					<view class="type-ul">
						<view class="type-li">
							高铁(G/C)
						</view>
						<view class="type-li">
							动车(D)
						</view>
						<view class="type-li">
							普通(Z/T/K)
						</view>
						<view class="type-li">
							高铁(G/C)
						</view>
					</view>
				</view>
				<view class="trainType">
					<view class="lable">
						出发时间
					</view>
					<view class="type-ul">
						<view class="type-li">
							00:00 - 06:00
						</view>
						<view class="type-li">
							06:00 - 12:00
						</view>
						<view class="type-li">
							12:00 - 18:00
						</view>
						<view class="type-li">
							18:00 - 24:00
						</view>
					</view>
				</view>
				<view class="trainType">
					<view class="lable">
						出发车站
					</view>
					<view class="type-ul">
						<view class="type-li">
							深圳东站
						</view>
						<view class="type-li">
							深圳站
						</view>
					</view>
				</view>
				<view class="trainType">
					<view class="lable">
						只看有票
					</view>
					<view class="type-ul">
						<view class="type-li">
							硬座
						</view>
						<view class="type-li">
							硬卧
						</view>
						<view class="type-li">
							软卧
						</view>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPop: false,
				curtab: 0,
				background: {
					backgroundColor: 'rgba(255,255,255,0)'
				}
			}
		},
		methods: {
			preDay(){
				
			},
			nextDay(){
				
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
			tabFn(val) {
				this.curtab = val
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 750rpx;
		height: 304rpx;
		background: linear-gradient(139deg, #3FA3F9 0%, #2D7BF7 100%);

		.datePicker {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #FFFFFF;
			padding: 28rpx 28rpx 0;

			.date {
				width: 224rpx;
				height: 60rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 4px;
				color: #FFFFFF;
				text-align: center;
				line-height: 60rpx;
			}
		}
	}

	.container {
		margin-top: -88rpx;

		.planeTab {
			width: 100%;
			height: 134rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 0 0;
			display: flex;
			align-items: center;
			padding: 0 28rpx;

			.planeTab-item {
				flex: 1;
				color: #333333;
				display: flex;
				flex-direction: column;
				align-items: center;

				&.active {
					color: #3587F7;
				}

				.title {
					font-size: 32rpx;
					font-family: Segoe UI;
					font-weight: bold;
				}

				.price {
					font-size: 24rpx;
					font-family: Segoe UI;
					font-weight: 400;
					padding: 6rpx 0;
				}

				.line {
					width: 96rpx;
					height: 6rpx;
					background: #3587F7;
					border-radius: 40rpx;
				}
			}
		}

		.train-ul {
			padding: 0 28rpx;

			.train-li {
				margin-top: 20rpx;
				width: 100%;
				background: #FFFFFF;
				border-radius: 8rpx;

				.trainInfo {
					padding: 20rpx;
					display: flex;
					align-items: center;

					.start,
					.end {
						display: flex;
						flex-direction: column;
						align-items: center;

						.time {
							font-size: 36rpx;
							font-family: Alibaba Sans;
							font-weight: bold;
						}

						.address {
							font-size: 24rpx;
							font-family: Segoe UI;
							font-weight: 400;
							color: #333333;
						}
					}

					.info {
						display: flex;
						flex-direction: column;
						align-items: center;
						margin: 0 72rpx;
						font-size: 20rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #666666;

						image {
							width: 108rpx;
							height: 6rpx;
						}
					}

					.price {
						margin-left: auto;

						.pri {
							font-size: 36rpx;
							font-family: Alibaba Sans;
							font-weight: bold;
							color: #F57426;
						}

						.tip {
							width: 108rpx;
							height: 36rpx;
							background: #3587F7;
							border-radius: 4rpx;
							font-size: 20rpx;
							font-family: Segoe UI;
							font-weight: 400;
							color: #FFFFFF;
							text-align: center;
							line-height: 36rpx;
						}
					}
				}

				.trainNum {
					padding: 0 20rpx 20rpx;
					display: flex;
				}
			}
		}

		.lable {
			padding: 20rpx 28rpx 0;
		}
	}

	.filter {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 12rpx 0px 12rpx rgba(0, 0, 0, 0.16);
		border-radius: 16rpx 16rpx 0px 0px;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	
	.poponBox {
		padding-bottom: 20rpx;
		.head {
			padding: 0 28rpx;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title {
				font-size: 34rpx;
				font-family: Segoe UI;
				font-weight: bold;
				color: #333333;
			}
			.comfirm {
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #3587F7;
			}
		}
		
		.trainType {
			padding: 0 28rpx;
			.lable {
				font-size: 24rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #999999;
				margin-top: 20rpx;
			}
			
			.type-ul {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				.type-li {
					margin-top: 20rpx;
					width: 218rpx;
					height: 60rpx;
					background: #F7F8FA;
					border-radius: 4rpx;
					text-align: center;
					line-height: 60rpx;
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #333333;
					&:nth-child(3n-1) {
						margin-left: 20rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
	}
</style>
